<template>
	<view>
		<u-navbar :border-bottom="false" title="密码设置" :title-size="36" :title-bold="true" :title-color="textColor" :background="{backgroundColor: bgColor}">
		</u-navbar>
		<u-form class="container" :model="form" ref="passForm" :error-type="['toast']">
			<u-form-item label-position="top" label="校验码" :label-style="labelStyle" prop="validCode">
				<u-input v-model="form.validCode" placeholder="请输入校验码" />
				<ak-valid-code slot="right" ref="validCode" @changeCode="changeValidCode" />
			</u-form-item>
			<u-form-item label-position="top" label="当前手机号" :label-style="labelStyle" prop="PhoneNumber">
				<u-input v-model="form.PhoneNumber" placeholder="请输入当前手机号" />
			</u-form-item>
			<u-form-item label-position="top" label="验证码" :label-style="labelStyle" prop="SMSCode">
				<u-input v-model="form.SMSCode" placeholder="请输入验证码" :maxlength="6"/>
				<ak-get-code :mobile="form.PhoneNumber" :is-valid="isValid" />
			</u-form-item>
			<u-form-item label-position="top" label="新密码" :label-style="labelStyle" prop="NewPassword">
				<u-input type="password" v-model="form.NewPassword" placeholder="请输入新密码" />
			</u-form-item>
			<u-form-item label-position="top" label="确认密码" :label-style="labelStyle" prop="ComfirmPassword">
				<u-input type="password" v-model="form.ComfirmPassword" placeholder="请再次输入新密码" />
			</u-form-item>
		</u-form>
		<set-submit-bt @click="handleSubmit" />
	</view>
</template>

<script>
	import akValidCode from '@/components/ak-valid-code/index.vue'
	import akGetCode from '@/components/ak-get-code/index.vue'
	import SetSubmitBt from '@/components/set-submit-bt/index.vue'
	import { changePass } from '@/config/idsApi.js'
	import { useUserStore } from '@/store/user.js';
	import { mapState } from 'pinia';
	export default {
		components: { akValidCode, akGetCode, SetSubmitBt },
		data() {
			return {
				validCode: '',
				form: {
					validCode: '',
					PhoneNumber: '',
					SMSCode: '',
					NewPassword: '',
					ComfirmPassword: '',
				},
				labelStyle: {
					fontSize: '30rpx',
				},
				rules: {
					SMSCode: [
						{ required: true, message: '验证码必填', trigger: 'blur'},
						{ len: 6, message: '请输入正确的验证码', trigger: 'bulr' }
					],
					validCode: [
						{ required: true, message: '校验码必填', trigger: 'blur'},
						{
							// 自定义验证
							validator: (rule, value, callback) => {
								return this.validCode.toLowerCase() == value.toLowerCase()
							},
							message: '验证码错误',
							trigger: 'blur'
						}
					],
					PhoneNumber: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value) && value == this.storeUser.phoneNumber;
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['blur'],
						}
					],
					NewPassword: [
						{ required: true, message: '密码不能为空', trigger: 'blur' },
						{
							pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&#~\.])[A-Za-z\d@$!%*?#~&\.]{6,16}$/,
							message: '密码长度6~16位字符并包含大写字母、小写字母、特殊符号、数字',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['blur'],
						}
					],
					ComfirmPassword: [
						{ required: true, message: '确认密码不能为空', trigger: 'blur' },
						{
							validator: (rule, value, callback) => {
								return value === this.form.NewPassword;
							},
							message: '两次输入的密码不相等',
							trigger: ['blur'],
						}
					]
				}
			}
		},
		onReady() {
			this.$refs.passForm.setRules(this.rules);
			this.$refs.validCode.init()
		},
		computed: {
			isValid() {
				let obj = {
					isSend: true,
					msg: ''
				}
				let isValid = this.validCode.toLowerCase() == this.form.validCode.toLowerCase()
				let isMobile = this.$u.test.mobile(this.form.PhoneNumber)
				if (!isMobile) {
					obj = {
						isSend: false,
						msg: '手机号不正确'
					}
				}
				if (!isValid) {
					obj = {
						isSend: false,
						msg: '校验码错误'
					}
				}
				return obj
			},
			...mapState(useUserStore, {userlogout: 'logout',storeUser:'user'})
		},
		methods: {
			async handleSubmit() {
				this.$refs.passForm.validate(async (valid) => {
					if (!valid) return;
					const res = await changePass(this.form);
					if(res){
						this.$u.toast('设置密码成功，请重新登录');
						this.userlogout();
						this.$mHelper.delayedJump('/pages/mine/index', 'reLaunch')
					}else{
						this.$u.toast(res.erroMessage)
					}
				
				})
			},
			changeValidCode(code) {
				this.validCode = code
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.container {
		padding: 0rpx 70rpx;
	}
	.profile-footer {
		width: 100%;
		padding: 0 75rpx;
		position: absolute;
		bottom: 90rpx;
		text-align: center;
	}
	::v-deep .u-form-item--right__content {
		align-items: flex-end;
	}
</style>
